<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
        legend{text-align: center;
               font-size: 25px;}
		fieldset{width: 700px;
				 background: #eee}
	    p{font-size: 20px;}
	</style>
	<script type="text/javascript">
		/*$('reset').onclick=function(){
		this.getElementsByTagName('input').innerText=''
		}*/
		function $(id){
			return document.getElementById(id)
		}
		function checkX(){
			//获取到输入值
		    var mingzi=$('mingz').value;
		    var us1=$('us1')
			var reg1=/\D+/
			if (reg1.test(mingzi)){
				//符合规则
				us1.innerHTML='正确'
				return true
			}
			else{
				//不符合规则
				us1.innerHTML='不能为数字'
				return false}	
		}
		function checkXs(){
			//获取到输入值
		    var xs=$('xs').value;
		    var us2=$('us2')
			var reg2=/\D+/
			if (reg2.test(xs)){
				//符合规则
				us2.innerHTML='正确'
				return true
			}
			else{
				//不符合规则
				us2.innerHTML='不能为数字'
				return false}	
		}
		function checkName(){
			//获取到输入值
		    var username=$('username').value;
		    var us3=$('us3')
			var reg3=/\w+/
			if (reg3.test(username)){
				//符合规则
				us3.innerHTML='正确'
				return true
			}
			else{
				//不符合规则
				us3.innerHTML='请填写由英文/数字/下划线组成登录名'
				return false}	
		}
		function checkPW(){
			//获取到输入值
		    var password=$('password').value;
		    var us4=$('us4')
			var reg4=/.{6,}/
			if (reg4.test(password)){
				//符合规则
				us4.innerHTML='正确'
				return true
			}
			else{
				//不符合规则
				us4.innerHTML='请输入大于6位的密码'
				return false}	
		}
		function checkPW1(){
			//获取到输入值
		    var chongf=$('chongf').value;
		    var us5=$('us5')
		    var password=$('password').value;
			
			if (chongf.valueOf()==password.valueOf()){
				//符合规则
				us5.innerHTML='一致'
				return true
			}
			else{
				//不符合规则
				us5.innerHTML='输入密码需要与前次密码一致'
				return false }	
		}
		function checkEm(){
			//获取到输入值
		    var email=$('email').value;
		    var us6=$('us6')
		    var reg6=/^\w+@\w+\.[a-zA-Z]{2,3}\.[a-zA-Z]{2,3}?$/
			
			if (reg6.test(email)){
				//符合规则
				us6.innerHTML='正确'
				return true
			}
			else{
				//不符合规则
				us6.innerHTML='错误'
				return false }	
		}
		
		
		

	</script>

</head>
<body>
	<form action="" class="fm">
		<fieldset>
		<legend>信息登记表</legend>
		<p>名字：
			<input type="text"  name="" id="mingz" onblur='checkX()'/>
			<span id="us1"></span>
		</p>
		<p>姓氏：
			<input type="" name="" id="xs" onclick="" onblur='checkXs()'>
			<span id="us2"></span>
		</p>
		<p>登录名：
			<input type="" name="" id="username" onblur='checkName()'>
			<span id="us3"></span>
		</p>
		<p>密码：
			<input type="password" name="" id="password" onblur='checkPW()'>
			<span id="us4"></span>
		</p>
		<p>再次输入密码：
			<input type="password" name="" id="chongf" onblur='checkPW1()'>
			<span id="us5"></span>
		</p>
		<p>电子邮箱：
			<input type="" name="" id="email" onblur='checkEm()' multiple>
			<span id="us6"></span>
		</p>
		<p>性别：<input type="radio" name="gender" id="y">男
				<input type="radio" name="gender" id="x">女
		</p>
		<p>头像：<input type="file" name="" id="head"></p>
		<p id="hobby">爱好：<input type="checkbox" name="">运动
				<input type="checkbox" name="">聊天
				<input type="checkbox" name="">玩游戏
		</p>
		<p id="dat">
			出生日期：<input type="" name="" size="7" id="year"  onblur='checkYe()'>年
			
				<select>
					<option>-[请选择月份]-</option>
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
					<option>6</option>
					<option>7</option>
					<option>8</option>
					<option>9</option>
					<option>10</option>
					<option>11</option>
					<option>12</option>
				</select>月
			<input type="" name="" size="7" id="date" onblur='checkDat()'>日
			
		</p>
		<P>
			<input type="submit" name="" value="提交" id="submit"> 
			<input type="reset" name="" value="重填" id="reset">
		</P>
		</fieldset>
	</form>
	
</body>
</html>